var Card = /** @class */ (function () {
    function Card(dom) {
        this.dom = dom;
    }
    return Card;
}());
var Game = /** @class */ (function () {
    function Game(n) {
        this.gameDom = document.getElementById('game_content');
        this.gameDomWidth = 500;
        this.gameDomHeight = 650;
        this.n = (n == null) ? 3 : n;
        this.imgUrl = '';
        this.cards = [];
        this.blankCardI = -1;
        this.blankCardJ = -1;
        this.randomCount = 10;
        this.originCards = [];
    }
    Game.prototype.start = function () {
        this.openDataDomObserver();
        //开启键盘监听
        this.addKeyBoardListener();
    };
    /**
     * 进入游戏后的监视
     *
     * callback函数为回调函数，
     */
    Game.prototype.openDataDomObserver = function () {
        var that = this;
        var dom = document.getElementById('data');
        var options = { attributes: true, characterData: true, childList: true, subtree: true };
        //<div id="data">{{ data }}</div>
        //当data的值改变，执行下面的回调函数
        //可以理解为游戏开始的回调函数
        function callback(mutationRecords) {
            if (mutationRecords[0].addedNodes.length !== 0) {
                console.log('进入游戏');
                //第一步：获取图片地址
                that.getImgUrl(mutationRecords[0]);
                //第二步：将图片组成dom元素
                that.initGameView();
                //第三步：将dom元素添加到Card类
                that.initCards();
                //第四步：打乱所有卡片
                that.randomAllCards();
                //第五步：设置一个空白卡片
                that.setRandomCardDonotVis();
                // that.printCards();
                // that.changeCard(that.cards[0][0] , that.cards[0][1]);
            }
            else {
                console.log('退出游戏');
                that.removeGameDom();
            }
        }
        var mutationObserver = new MutationObserver(callback);
        mutationObserver.observe(dom, options);
    };
    Game.prototype.getImgUrl = function (mutationRecord) {
        this.imgUrl = mutationRecord.addedNodes[0].data;
    };
    //初始化card元素
    Game.prototype.initCards = function () {
        var n = this.n;
        for (var i = 0; i < n; i++) {
            var arr = [];
            for (var j = 0; j < n; j++) {
                var divName = "div".concat(i).concat(j);
                var dom = document.getElementById(divName);
                var rect = dom.getBoundingClientRect();
                // console.log(rect)
                arr.push(new Card(dom));
            }
            this.cards.push(arr);
            this.originCards.push(arr);
        }
    };
    /**
     * 初始化游戏的界面，既将选择的图片分割成一块一块的
     */
    Game.prototype.initGameView = function () {
        //生成m*n个div元素
        var m = this.n;
        var n = this.n;
        var frags = "<table id = 'fragTable' style='border: 5px'>";
        for (var i = 0; i < m; i++) {
            frags += "<tr>";
            for (var j = 0; j < n; j++) {
                frags += "<td><div id='div" + i + j + "'></div></td>";
            }
            frags += "</tr>";
        }
        frags += "</table>";
        document.getElementById("game_content").innerHTML = frags;
        this.addImage();
    };
    //为每个div添加背景图片
    Game.prototype.addImage = function () {
        var m = this.n;
        var n = this.n;
        for (var i = 0; i < m; i++) {
            for (var j = 0; j < n; j++) {
                var curdiv = document.getElementById("div" + i + j);
                var wid = 650;
                var hgt = 500;
                curdiv.style.background = "url(".concat(this.imgUrl, ") no-repeat scroll");
                curdiv.style.backgroundSize = "650px 500px";
                curdiv.style.width = (wid / n) + "px";
                curdiv.style.height = (hgt / m) + "px";
                curdiv.style.backgroundPosition = this.getInverse(j * (wid / n)) +
                    "px" + ' ' + this.getInverse(i * (hgt / m)) + "px";
            }
        }
    };
    /**
     * 设置一个卡片为隐藏卡片
     */
    Game.prototype.setRandomCardDonotVis = function () {
        var randomI = this.getRandomNum(0, this.n - 1);
        var randomJ = this.getRandomNum(0, this.n - 1);
        this.blankCardI = randomI;
        this.blankCardJ = randomJ;
        this.cards[randomI][randomJ].dom.style.display = 'none';
    };
    /**
     * 交换两个card
     * @param card1
     * @param card2
     * @private
     */
    Game.prototype.changeCard = function (card1, card2) {
        var curCard = card1.dom.getAttribute("style");
        card1.dom.setAttribute("style", card2.dom.getAttribute("style"));
        card2.dom.setAttribute("style", curCard);
    };
    /**
     * 添加键盘监听
     */
    Game.prototype.addKeyBoardListener = function () {
        var that = this;
        document.onkeydown = function (event) {
            // console.log(event)
            that.keyboardOperation(event);
        };
    };
    /**
     * 键盘事件监听具体操作函数
     * @param e
     */
    Game.prototype.keyboardOperation = function (e) {
        console.log("\u79FB\u52A8\u524D:[".concat(this.blankCardI, ",").concat(this.blankCardJ, "]"));
        if (e.key === 'ArrowUp') { //上
            //1、如果当前空白卡片在最顶部，即blankI=0时，向上移动操作失败
            //2、如果当前空白卡片不在最顶部，则移动
            if (this.blankCardI !== 0) {
                //2.1、先移动两个卡片
                this.changeCard(this.cards[this.blankCardI][this.blankCardJ], this.cards[this.blankCardI - 1][this.blankCardJ]);
                //2.2、再将空白卡片的坐标改变
                this.blankCardI--;
            }
        }
        else if (e.key === 'ArrowDown') { //下
            //1、如果当前卡片不在最底部，即blackI != n，即移动，反之不移动
            if (this.blankCardI !== this.n) {
                this.changeCard(this.cards[this.blankCardI][this.blankCardJ], this.cards[this.blankCardI + 1][this.blankCardJ]);
                this.blankCardI++;
            }
        }
        else if (e.key === 'ArrowLeft') { //左
            //1、如果卡片不在最左边，即blankJ != 0,即移动，反之不移动
            if (this.blankCardJ !== 0) {
                this.changeCard(this.cards[this.blankCardI][this.blankCardJ], this.cards[this.blankCardI][this.blankCardJ - 1]);
                this.blankCardJ--;
            }
        }
        else if (e.key === 'ArrowRight') { //右
            //2、如果卡片不在最右边，即blankJ != n，即移动，反之不移动
            if (this.blankCardJ !== this.n) {
                this.changeCard(this.cards[this.blankCardI][this.blankCardJ], this.cards[this.blankCardI][this.blankCardJ + 1]);
                this.blankCardJ++;
            }
        }
        console.log("\u79FB\u52A8\u540E:[".concat(this.blankCardI, ",").concat(this.blankCardJ, "]"));
    };
    /**
     * 将所有的卡片随机排放
     */
    Game.prototype.randomAllCards = function () {
        // let originArr: any[] = [];
        // let map = [];
        // //存入key
        // for (let i = 0 ; i < this.n * this.n ; i++) {
        //   originArr.push(i);
        // }
        // //设置对应的key-value
        // for (let i = 0 ; i < this.n; i++) {
        //   for (let j = 0 ; j < this.n ; j++) {
        //     map.push({
        //       i: i,
        //       j: j
        //     })
        //   }
        // }
        // console.log(map);
        for (var i = 0; i < this.randomCount; i++) {
            var card1I = this.getRandomNum(0, this.n);
            var card1J = this.getRandomNum(0, this.n);
            var card2I = this.getRandomNum(0, this.n);
            var card2J = this.getRandomNum(0, this.n);
            console.log("[".concat(card1I, ",").concat(card1J, "]->[").concat(card2I, ",").concat(card2J, "]"));
            this.changeCard(this.cards[card1I][card1J], this.cards[card2I][card2J]);
        }
    };
    Game.prototype.removeGameDom = function () {
        var gameDom = document.getElementById('fragTable');
        gameDom.remove();
    };
    //取相反数
    Game.prototype.getInverse = function (num) {
        return (0 - num);
    };
    /**
     * 获取 a ~ b 的之间的值,[a,b]包含a和b \n
     * 例如 a=0,b=10    random(a,b) = 5
     * @param a
     * @param b
     * @private
     */
    Game.prototype.getRandomNum = function (a, b) {
        return Math.floor((Math.random() * b) + a);
    };
    Game.prototype.printCards = function () {
        for (var i in this.cards) {
            for (var j in this.cards[i]) {
            }
        }
    };
    return Game;
}());
new Game().start();
